<script setup>
import {onBeforeMount, onMounted, shallowRef} from "vue";
import {useDark, useToggle} from "@vueuse/core/index";
import MyIcon from "@/components/MyIcon.vue";
import MyList from "@/components/MyList.vue";

import MyConfirm from "@/components/MyConfirm.vue"
import {MINIO_HOST} from "@/const";
import router from "@/router";
import {useStore} from "vuex";
import {ElMessage} from "element-plus";


/* ==================== 功能菜单 ==================== */
// 根据localStorage判断，当前是否正在使用暗黑模式
const currentTheme = shallowRef(localStorage.getItem('vueuse-color-scheme') === 'auto')
// 切换暗黑模式和默认模式
const toggleTheme = useToggle(useDark());
// 当前选中权限的index值
let currentMenuIndex = shallowRef('/DashBoard');
// 左侧权限列表是否折叠
const isCollapse = shallowRef(false);
// 当前登录的会员的权限列表
const permissions = formatPermissions(JSON.parse(sessionStorage.getItem('loginPermissions')));
//当前登录员工信息
const emp =JSON.parse(sessionStorage.getItem('loginEmp'));
let avatar = MINIO_HOST+'/test/'+emp['avatar'];
 const vuex = useStore();

console.log(avatar);


console.log(permissions)

/*
* [
*   {id: 1, name: '111', pid: 0},
*   {id: 2, name: '111', pid: 0},
*   {id: 3, name: '111', pid: 1},
*   {id: 4, name: '111', pid: 1},
* ]
*
* [
*   {id: 1, name: '111', pid: 0, sub: [
*      {id: 3, name: '111', pid: 1},
*      {id: 4, name: '111', pid: 1},
*   ]},
*   {id: 2, name: '111', pid: 0},
* ]
*
* */
/* ==================== 系统日历 ==================== */

// 抽屉
const calendarDrawer = shallowRef();
// 打开抽屉
function openCalendarDrawer() {
  calendarDrawer.value = true;
}
const projectInfoDrawer =shallowRef();
  function openProjectInfoDrawer(){
    projectInfoDrawer.value=true;
  }
let projectInfoItems=[
  {'type':'','label':'项目名称','value':'MyClub后台管理子系统'},
  {'type':'textarea','label':'简介','value':'\n' +
        'MyClub管理系统是基于SpringBoot开发的，旨在提供一个全面而高效的管理平台。通过该系统，管理员可以轻松管理俱乐部的课程安排、学员信息、教师信息以及其他相关资源。学员可以方便地查看课程信息、完成作业和考试，并与教师进行互动。教师可以便捷地发布课程内容、评估学员表现，并与学员及管理员进行沟通交流。系统还提供了多种功能模块，包括课程管理、学员管理、教师管理、作业管理、考试管理等，以满足不同用户的需求。同时，系统具有良好的可扩展性和稳定性，为俱乐部的管理和运营提供了可靠的支持'},
  {'type':'','label':'作者','value':'来佳乐'},
  {'type':'','label':'版本','value':'1.0.0'},
  {'type':'','label':'host','value':'http://localhost:8101\n'},
  {'type':'','label':'basePath','value':'/'},
  {'type':'','label':'分组名称','value':'v1'},
  {'type':'','label':'分组Url','value':'/v3/api-docs/v1'},
  {'type':'','label':'分组location','value':'/v3/api-docs/v1'},
  {'type':'tag','label':'接口统计信息       POST','value':'31'},
  {'type':'tag','label':'接口统计信息       GET','value':'12'},
]
const empDrawer = shallowRef();
// 打开抽屉
function openEmpInfoDrawer() {
  empDrawer.value = true;
}
let empInfoItems=[
  {'type':'img','label': '员工头像','value':'default-avatar.png',minio:src=>MINIO_HOST+'/test/'+src},
    {'type':'','label':'员工姓名','value':emp['realname']},
  {'type':'','label':'员工性别','value':emp['gender']},
  {'type':'','label':'员工年龄','value':emp['age']},
  {'type':'','label':'员工电话','value':emp['phone']},
  {'type':'','label':'员工微信','value':emp['wechat']},
  {'type':'','label':'员工邮箱','value':emp['email']},
  {'type':'','label':'员工身份证','value':emp['idcard']},
  {'type':'','label':'员工省份','value':emp['province']},
  {'type':'card','label':'员工信息','value':emp['info']},
  {'type':'','label':'入职日期','value':emp['hiredate']}


]

// 当前时间
let now = shallowRef(new Date());

function logout(){
   sessionStorage.clear();
  // loginFlag = false
  vuex.dispatch('setLoginFlag', false);
  ElMessage.success('退出成功！');
  //跳转到主页面
  router.push('/');
}

function formatPermissions(permissions) {
  let fuPermissions = [];
  let ziPermissions = [];
  for (let i in permissions) {
    let permission = permissions[i];
    if (permission['pid'] === 0) {
      permission['subPermissions'] = [];
      fuPermissions.push(permission);
    } else {
      ziPermissions.push(permission)
    }
  }
  for (let i in ziPermissions) {
    for (let j in fuPermissions) {
      if (ziPermissions[i]['pid'] === fuPermissions[j]['id']) {
        fuPermissions[j]['subPermissions'].push(ziPermissions[i]);
        break;
      }
    }
  }
  return fuPermissions;
}


/* ==================== onMounted ==================== */
/* ==================== onMounted ==================== */


// 暗黑模式
onMounted(() => useToggle(useDark()));
</script>

<template>
  <el-container class="main-body">

    <el-aside class="main-body-left" width="collapse" max-width="200px">

      <el-menu class="permissions-menu el-menu-vertical-demo" unique-opened router
               :collapse="isCollapse"
               :default-active="currentMenuIndex">
        <el-image class="logo" :src="require('../assets/image/11.webp')"/>
        <!--DashBoard-->
        <el-menu-item class="house-item" idex="/DashBoard" title="回到后台项目首页">
          <template #title>
            <my-icon icon="House" label="DashBoard"></my-icon>
          </template>
        </el-menu-item>


        <!--遍历父权限-->
        <el-sub-menu class="permissions"
                     v-for="(permission, i) in permissions" :key="permission['id']"
                     :index="i.toString()" :title="permission['info']">
          <template #title>
            <my-icon :icon="permission['icon']" :label="permission['title']"/>
          </template>
          <!--遍历子权限-->
          <el-menu-item class="sub-permissions"
                        v-for="subPermission in permission['subPermissions']" :key="subPermission['id']"
                        :index="subPermission['url']" :title="subPermission['info']">
            <my-icon :icon="subPermission['icon']" :label="subPermission['title']"/>
          </el-menu-item>

        </el-sub-menu>

      </el-menu>
    </el-aside>
    <el-container class="main-body-right">
      <el-header class="main-body-right-head">
        <el-row class="is-align-middle">
          <el-col class="fold-expand" :span="2">
            <el-radio-group v-model="isCollapse">
              <el-radio-button :label="!isCollapse">
                <my-icon size="20" :icon="!isCollapse ? 'Fold' : 'Expand'"/>
              </el-radio-button>
            </el-radio-group>
          </el-col>
          <el-col class="project-title" :span="7">
            <h2>MyClub后台管理子系统</h2>
          </el-col>

          <el-col class="operation-btn" :span="6" :offset="7">
            <el-divider direction="vertical"/>
            <el-button icon="search" @click="()=>ElMessage.warning('暂未开发！')" size="small" round/>
            <el-button icon="bell" @click="()=>ElMessage.warning('暂未开发！')" size="small" round/>
            <el-button icon="list" @click="openProjectInfoDrawer" size="small" round/>
            <el-button icon="calendar" @click="openCalendarDrawer" size="small" round/>
            <el-divider direction="vertical"/>
            <el-switch class="theme-switch" v-model="currentTheme" @change="toggleTheme()" inline-prompt
                       title="开启暗黑模式"/>
            <el-divider direction="vertical"/>
          </el-col>
          <el-col class="emp-realname-col" :span="1" v-if="emp['realname']">
            {{ emp['realname'] }}
          </el-col>

          <el-col class="emp-avatar-col" :span="1" v-if="emp['avatar']">

            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <el-avatar class="emp-avatar" :size="45" :src="avatar"/>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item icon="InfoFilled" @click="router.push('/ums/personal/Personal')">
                    查看信息
                  </el-dropdown-item>
                  <el-dropdown-item icon="InfoFilled" @click="router.push('/ums/personal/PersonalUpdate')">
                    修改信息
                  </el-dropdown-item>

                  <el-dropdown-item icon="InfoFilled" @click="() => router.push('/')">
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

          </el-col>
        </el-row>
      </el-header>
      <el-main class="main-body-right-main">
        <router-view/>
      </el-main>
    </el-container>

  </el-container>
  <!--项目抽屉-->
  <el-drawer title="项目管理" v-model="projectInfoDrawer" size="50%">
<my-list :items="projectInfoItems" title="项目管理子系统"></my-list>
  </el-drawer>
  <!--日历抽屉-->
  <el-drawer title="当前时间" v-model="calendarDrawer" size="50%">
    <el-calendar v-model="now"/>
  </el-drawer>
  <!--头像抽屉-->
  <el-drawer title="信息" v-model="empDrawer" size="30%">
    <my-list :items="empInfoItems" title="登录人信息"></my-list>
  </el-drawer>

</template>

<style scoped lang="scss">
.main-body-left {

  height: 100vh; // 高度
  border-right: 1px solid #cccccc; // 右边框

  .logo {
    padding: 10px; // 内边距
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px; // 宽度
    height: 100vh; // 高度
    letter-spacing: 2px; // 字间距
  }

  .el-icon {
    margin: 0 10px; // 上下外边距 左右外边距
  }
}

.main-body-right-head {

  .avatar-img {
    margin: 10px; // 外边距
    outline: 1px solid #854040; // 边框
    border: 1px solid #854040; // 边框
  }
}
</style>